<template>
  <header class="shop-appraise-header">
    <div class="left">
      <div class="overall">{{ Math.round(scores.overall_score) }}</div>
      <div class="text">综合评价</div>
      <div v-if="scores.compare_rating" class="compare-rating">
        高于周围商家{{ scores.compare_rating.toFixed(3) * 100 }}%
      </div>
    </div>
    <div class="right">
      <div class="service-attitude" v-if="scores.service_score">
        服务态度
        <span class="starts">
          <span
            class="start"
            v-for="i in Math.floor(scores.service_score)"
          ></span>
          <span
            class="start"
            v-if="scores.service_score > 4"
            :style="{
              'background-position-y': scores.service_score > 4.5 ? '' : '20px',
            }"
          ></span>
        </span>
        {{ scores.service_score | rounding  }}
      </div>
      <div class="dish-evaluation" v-if="scores.food_score">
        菜品评价
        <span class="starts">
          <span class="start" v-for="i in Math.floor(scores.food_score)"></span>
          <span
            class="start"
            v-if="scores.food_score > 4"
            :style="{
              'background-position-y': scores.food_score > 4.5 ? '' : '20px',
            }"
          ></span>
        </span>
        {{ scores.food_score| rounding  }}
      </div>
      <div class="time">
        <span class="text"> 送达时间</span> {{ scores.deliver_time }}
        <span class="minute">分钟</span>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  props: {
    scores: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  filters: {
    rounding(value) {
      return Math.round(value * 10) / 10;
    },
  },
};
</script>
<style lang="less" scoped>
.shop-appraise-header {
  display: flex;
  padding: 20px;
  border-bottom: 10px solid #f5f5f5;
  font-size: 15px;
  color: #666666;
  .left {
    
    width: 40%;
    text-align: center;
    .overall {
      font-size: 25px;
      font-weight: 700;
      color: #ffde7b;
    }
    .text {
      margin: 3px 0 5px 0;
    }
    .compare-rating {
      font-weight: 700;
      font-size: 10px;
      color: #b9b9b9;
    }
  }
  .right {
    
    width: 60%;
    div {
      margin-bottom: 10px;
    }
    .service-attitude,
    .dish-evaluation {
      .starts {
        display: inline-block;
        width: 50px;
        margin: 0 10px;
        .start {
          display: inline-block;
          width: 10px;
          height: 10px;
          background-image: url("~assets/img/msite/start.png");
          background-size: 100%;
        }
      }
    }
    .time {
      .text {
        margin-right: 10px;
      }
      .minute {
        font-weight: 700;
        font-size: 10px;
        color: #b9b9b9;
      }
    }
  }
}
</style>